<template>
    <view>
        <view class="parent-container" :class="{ 'scale-animation': isClicked }" @tap="handleTap()">
            <image class="fill-image" 
                :src="image" />
            <view class="button-text">{{ props.text }}</view>
        </view>
    </view>
</template>

<script lang="ts" setup>


import { ref, defineEmits, defineProps } from 'vue'

import { onLoad } from '@dcloudio/uni-app'


const emit = defineEmits(['mytap'])

const isClicked = ref(false)

const props = defineProps({
    image: String,
    width: {
        type: String,
        default: '100%'
    },
    height: {
        type: String,
        default: '100%'
    },
    text: {
        type: String,
        default: ''
    }
})

const handleTap = () => {
    isClicked.value = true; // 触发动画
    setTimeout(() => {
        isClicked.value = false; // 动画结束后恢复
        emit('mytap')
    }, 1); // 动画持续时间


}


</script>

<style scoped>
.scale-animation {
    transform: scale(0.98);
    /* 缩小 5% */
}

.button-container {

    transition: transform 0.05s ease;
    overflow: hidden;
    position: relative;
    /* 设置按钮高度 */
    border: none;
    /* 去掉边框 */
    border-radius: 15px;
    /* 圆角 */
    background-size: cover;
    /* 背景图片覆盖整个按钮 */
    background-position: center;
    /* 背景图片居中 */
    color: white;
    /* 文字颜色 */
    font-size: 18px;
    /* 文字大小 */
    font-weight: bold;
}


.button-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 图片覆盖整个按钮 */
    z-index: 1;
    /* 背景层 */
}

/* 按钮文字 */
.button-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* position: relative; */
    z-index: 2;
    /* 文字在上层 */
    color: white;
    /* 文字颜色 */
    font-size: 18px;
    /* 文字大小 */
    font-weight: bold;
    /* 文字加粗 */
}

.sibling {

    border-radius: 0 0 15rpx;
}

/* WXSS */
.parent-container {
  /* 3:1 宽高比容器（兼容iOS） */
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-top: 33.333%; /* 关键：用padding百分比实现固定比例 */
  border-radius: 20rpx;
  
}

.fill-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* iOS额外修复：防止图片边缘被裁剪 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
</style>